<template>
  <div class="tree-content">
    <!-- <van-checkbox-group v-model="result"> -->
    <van-collapse v-model="activeNames">
      <div v-for="item in menuTreeArr" :key="item.id" :name="item.id">
        <van-collapse-item v-if="item.children" :name="item.id">
          <template #title>
            <div @click.stop>
              <van-checkbox v-model="item.checked" :disabled="item.disabled" @click.stop="getCurrentNode(item,item.organizationName,item.checked)">{{ item .organizationName }}</van-checkbox>
            </div>

          </template>
          <MenuTree v-if="item.children&&item.children.length!==0" :menu-tree-arr="item.children" @getCurrentNode="getCurrentNode" />

        </van-collapse-item>
        <van-cell
          v-else
          :key="item"
          :title="`${item.organizationName}`"
          @click="toggle(index)"
        >
          <template #title>
            <van-checkbox v-model="item.checked" :disabled="item.disabled" :name="item.organizationCode" style="padding:0px 0 0 0px;box-sizing:border-box;" @click.stop="getCurrentNode(item,item.organizationName,item.checked)">{{ item .organizationName }}</van-checkbox>
          </template>
        </van-cell>
      </div>
    </van-collapse>
    <!-- </van-checkbox-group> -->

    <!-- {{ menuTreeArr }} -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Collapse, CollapseItem } from 'vant'

Vue.use(Collapse)
Vue.use(CollapseItem)
import { Checkbox, CheckboxGroup } from 'vant'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)
export default {
  name: 'MenuTree',
  props: {
    menuTreeArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      result: [],
      options: {
        checkbox: true
      },
      activeNames: ['1']
    }
  },
  watch: {
    result(arg) {
    }
  },
  created() {

  },
  methods: {
    getCurrentNode(node, arg, arg1) {
      if (node.children) {
        if (node.organizationName !== arg) {
          this.$set(node, 'checked', arg1)
        }
        node.children.forEach(element => {
          this.getCurrentNode(element, arg, node.checked)
        })
      } else {
        if (node.organizationName !== arg) {
          this.$set(node, 'checked', arg1)
        } else {
          this.findNode(node, this.menuTreeArr)
        }
      }
    },

    getNodes(arr) {
      arr.forEach(item => {
        if (item.children) {
          if (item.checked) {
            this.result.push({ organizationCode: item.organizationCode, parentCode: item.parentCode, belongCounty: item.belongCounty })
          }
          this.getNodes(item.children)
        } else {
          if (item.checked) {
            this.result.push({ organizationCode: item.organizationCode, parentCode: item.parentCode, belongCounty: item.belongCounty })
          }
        }
      })
    },
    findNode(node, arg) {
    //   alert(JSON.stringify(arg))
      if (arg.children) {
        arg.forEach(item => {
          this.findNode(node, item.children)
          if (item.organizationCode === node.parentCode) {
            this.$set(item, 'checked', node.checked)
          }
        })
      }
    },
    getNodesArr() {
      this.result = []
      this.getNodes(this.menuTreeArr)
      return this.result
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-content{
    width:100%;
    height:100%;
}
::v-deep .vs-tree-node{
    font-size:32px;
}
</style>
